<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="remark,remarkjs,markdown,slideshow,presentation" />
    <meta name="description" content="WCalendar - Software Engineering 2 Course Project" />
    <title>WCalendar - Software Engineering 2 Course Project</title>
    <link rel="stylesheet" href="css/dark.css"/>
    <link rel="stylesheet" href="css/progressjs.min.css"/>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

<style type="text/css">
.landing {
  background: url('img/background.jpg') no-repeat center;
  background-size: cover;
  color: white;
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.remark-slide-content h3 {
    font-size: 1.4em;
    letter-spacing: 0;
}
.remark-slide-content h4 {
    letter-spacing: 0;
    font-weight: 400;
}
.middle h2 {
  position: relative;
  bottom: 2em;
}
ul {
  float: left;
  padding-left: 5em;
}
</style>
    <textarea id="source">
name: landing
layout: true
class: center, middle, light, landing
---

#WCalendar
###Software Engineering 2 Course Project "Meteocal"
<img src="img/polimi.png" alt="polimilogo" style="width: 20%;">
<br><br>
####March 16, 2015
###Emanule Baldino<br>Du Lin<br>Guglielmo Molinari
<br>
<button class="btn btn-primary btn-lg go-next">Signup &raquo;</button>

---

name: sign
layout: true
.sign[***WCalendar***]
.course-right[Emanule Baldino, Du Lin, Guglielmo Molinari]
---

name: light
layout: true
class: center, middle, light

---

template: sign
layout: true
---

name:projdev
.title[##Project Development: Timeline]
--
.text[###***Nov 16, 2014*** - Requirements Analysis and Specification Document: use cases, functional and non-functional requirements]
--
.text[###***Dec 7, 2014*** - Design Document: persistent data design, technologic choices, general architecture]
--
.text[###***Jan 25, 2015*** - Implementation: code, Installation Manual, Testing Cases]
--
.text[###***Feb 8, 2015*** - Acceptance Testing]
--
.text[###***Feb 10, 2015*** - Project Reporting]
---

name:numbers
.title[##Some numbers first...]
--
.text[###UFPs estimate: **93 UFP**]
--
.text[###The finished project has **5240 SLOCs**]
--
.text[####Java: 3051]
--
.text[####HTML: 1214]
--
.text[###Using the CoCoMo II cost estimation model we get:]

<iframe src="math.html" style="border: 0; width: 40em; position:relative; left: -2em;"></iframe>

---

name:what
.title[##What is WCalendar?]
--
.text[###**WCalendar** is a new weather based online calendar]
--
.text[###for helping people scheduling their personal events]
--
.text[###avoiding bad weather conditions in case of outdoor activities.]
---

template:light
layout:false
##The Requirements
---

name:implemented
.title[##Required Features (1)]
--
.text[###Functional requirements of the system were divided in 4 macro-areas:]
<br>
--

.text[###**Event Management**]
--
.text[####add a new event]
--
.text[####edit an existing event]
--
.text[####delete an existing event]
--
.text[####make an event «Public» or «Private»]
--
.text[####specify details for an event: description, time, location]
--
.text[####invite other users of the service to events]
--
.text[####accept other users invitations for their own events]
--
.text[####automatic enrichment with weather information for every creation or edit of an event, and every 12 hours]
---

name:implemented2
.title[##Required Features (2)]
--
.text[###**User profile management**]
--
.text[####registration]
--
.text[####login]
--
.text[####logout]
--

.text[###**Calendar Management**]
--
.text[####modify privacy setting of the calendar (it can be public or private)]
--
.text[####import calendar]
--
.text[####export calendar]
--

.text[###**Notifications Management**]
--
.text[####automatic notification (with subsequent proposal for a new sunny day, if available) if an outdoor event turns to have bad weather three days before its happening]
--
.text[####email notifications for bad weather]
---

name:additional
.title[##Additional Features]
--
.text[###**Advanced User profile management**]
--
.text[####password reset]
--
.text[####email confirmation with token for the registration (more on this later)]
--
.text[####modify personal data]

--
.text[###**Modern UI: HTML5+CSS3**]
--
.text[####Responsive]
--
.text[####Mobile ready]

---

name:assumptions
.title[##Assumptions]
--
.text[###We decided to consider as "bad weather" all the weather conditions different than Sunny or Cloudy.]
--
.text[###Our current frontend implementation requires JavaScript to be enabled.]
--
.text[###When an user A views the calendar C of an user B]
--

+ Public events are always visible
+ Private events:
<div>
<ul style="padding-left: 2em">
  <li>fully visible if user A is also invited
  <li>partially visible if calendar C is public
  <li>not visible if calendar C is private
</ul>
</div>
---

template:light
layout:false
##The Design
---

name:design1
.title[##Design: Data persistence]
--
<img src="img/dbmodel.svg" alt="dbmodel" style="width: 180%; position:relative; left: 5em; top: 2em;">
---

name:design2
.title[##Design: Architecture]
--
.text[###We implemented a client-server RESTful architecture.]
--
.text[###**Stateless:** The session state is held in the client (signed JWT)]
--
.text[####Scalability]
--
.text[###**Decoupled:** The frontend is totally decoupled from the backend (except for the data format)]
--
.text[####Separation of Concerns]
--
.text[####Modularity]
--
.text[####Less code, so less bugs and less development time.]
--
.text[####Super easy development of mobile application thanks to Apache Cordova.]
---

name:design3
.title[##Design: MAIN-UX]
<img src="img/mainUX.svg" alt="ux" style="width: 80%; position:relative; left: 3em; top: 3em;">
---

name:design4
.title[##Design: USER-HOME-UX]
<img src="img/userHomeUX.svg" alt="ux" style="width: 80%; position:relative; left: 3em; top: 1em;">
---

template:light
layout:false
##A closer look to The Code
---

name:tools
.title[##Technology: Tools]
<img src="img/logos.png" alt="" style="width: 110%; margin-left: -1em;">
---

name:tiers
.title[##Technology: Tiers Architecture]
--
<img src="img/tiers.png" alt="tiers" style="width: 100%; position:relative; left: 1em;">
---

name:Feature
.title[##Code Focus: OpenWeather]
.text[###How works OpenWeather?]
--
.text[####OpeneWeather is an external entity that produce free forecast of your city or any main city you want.]
--

.text[####You can ask to OpenWeather a forecast using a direct URL and you get a JSon that contains all the data you need.]
--

.text[####For all cities present in the Database we get a forecast each time we want, so this is how we have informations needed to advice people if the is a rainy day during their events.]
---

name:Feature
.title[##Code Focus: Google Api Geolocation]
.text[###Why we want to use it?]
--

.text[####Google Api Geolocation is an amazing feature that can make more interesting the user experience and catch more informations about a new customer.]
--

.text[####Using these Api it's possible to have, in a more precise way, where live a new user or where a event will take place. This is important because we can get better forcast using the Geolocation coordinates.]
---

.text[####**Problem** We get some problems during the implementation of this feature because NetBeans use an old version of PrimeFaces (5.0) not compatible with Geocode, that want the 5.1.2 version.]

<img src="img/Geocode.png" alt="tiers" style="width: 80%; position:relative; left: 5em;">
---

.text[####**Solution** We builded, directly in the Xhtml, the software that can reach partialy our goal.]
<img src="img/Geocode2.png" alt="tiers" style="width: 70%; position:relative; left: 4em;">

---

template:light
layout:false
##DEMO!
---

template:light
layout:false
##Acceptance Testing

---

name:acceptance
.title[##Acceptance Testing]
.text[### We had lots of troubles deploying the project]
--
.text[###We manually downloaded all the materials from the repo]
--
.text[###We search inside the code for the right implementation of the DB]
--
.text[###Finally we could test the project]
---
name:acceptance
.title[##Acceptance Testing]
.text[### What works]
--
.text[###Creation of a user]
--
.text[###Login]
---
name:acceptance
.title[##Acceptance Testing]
.text[### What doesn't work]
--
.text[###Pretty much everything else]
---
<img src="img/testing.jpg" alt="tiers" style="width: 100%">
---
##Questions!
<img src="img/questiontime.jpg" alt="qt" style="width: 90%; position:relative; top: -1em;">
---

template:light
layout:false
##Thank you :)


    </textarea>
    <script src="js/progress.min.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script src="js/remark-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      var hljs = remark.highlighter.engine;
    </script>
    <script src="js/remark.language.js" type="text/javascript"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      var slideshow = remark.create({
        highlightStyle: 'monokai',
        highlightLanguage: 'remark'
      }) ;
      $('.remark-slide-number').hide();
      var progbar = progressJs(".remark-slides-area");
      progbar.start();
      progbar.set(0);
      slideshow.on('showSlide', function (slide) {
        var total = $('.remark-slide-number').html().split(" / ")[1]
        progbar.set(slide.getSlideIndex()/total*100);
      });
      setTimeout(function(){ $(".landing").css('background-size', 'cover').css('background-position', '0 0'); }, 2000);
      $(".go-next").click(function(){ slideshow.gotoNextSlide(); });
    });
    </script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-46402862-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
